<template>
  <div>
    <h1>{{ msg }}</h1>
    <Foo msg="foo"></Foo>
    <Bar msg="bar" ref="bar"></Bar>
    <h3 ref="stateDom">TemplateRefOne</h3>
    <Test></Test>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import Foo from './foo.vue'
import Bar from './bar.vue'
import Test from './test.vue'
export default defineComponent({
  name: 'HelloWorld',
  components: { Foo, Bar, Test },
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup() {
    const count = ref(0)
    const stateDom = ref()
    const bar = ref()

    onMounted(() => {
      console.log('%c 🥦 bar: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', bar.value.a)
      console.log('%c 🍝 stateDom: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', stateDom.value)
    })
    return { stateDom, count, bar }
  },
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
